<div class="billing-warper">

  <div class="billing-list-header">
    <form nz-form [formGroup]="validateForm" class="ant-advanced-search-form" [nzLayout]='vertical' (ngSubmit)="submitForm(validateForm)">

        <div nz-col [nzSpan]="8" >
          <nz-form-item nz-row nzFlex>
            <nz-form-label [nzSpan]="6" [nzFor]="type" >类型</nz-form-label>
            <nz-form-control [nzSpan]="18" >
              <nz-select formControlName="type" nzAllowClear nzPlaceHolder="请选择类型" (ngModelChange)="submitForm()">
                <nz-option nzValue="All" nzLabel="全部"></nz-option>
                <nz-option *ngFor="let bt of billingTypes" [nzValue]="bt.value" [nzLabel]="bt.name"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col [nzSpan]="8">
          <nz-form-item  nz-row nzFlex>
            <nz-form-label nz-col [nzSpan]="6" [nzFor]="daterange">日期</nz-form-label>
            <nz-form-control nz-col [nzSpan]="18" >
              <nz-range-picker formControlName="duration" nzFormat="yyyy/MM/dd" (ngModelChange)="submitForm()"></nz-range-picker>
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col [nzSpan]="8">
          <nz-form-item nz-row nzFlex>
            <nz-form-label nz-col [nzSpan]="6" [nzFor]="id">订单号</nz-form-label>
            <nz-form-control nz-col [nzSpan]="18">
              <nz-input-group nzSearch nzSize="min" [nzSuffix]="suffixButton">
                <input type="text" nz-input formControlName="varId" placeholder="请输入单号">
              </nz-input-group>
              <ng-template #suffixButton>
                <button type="submit" nz-button nzType="primary" nzSize="min" nzSearch>搜索</button>
              </ng-template>
            </nz-form-control>
          </nz-form-item>
        </div>

    </form>
  </div>

  <div class="billing-list-body">
    <nz-table #basicTable [nzData]="billings" nzShowPagination="false">
      <thead>
        <tr>
          <th>类型</th>
          <th>时间</th>
          <th>订单号</th>
          <th>名称</th>
          <th>对方</th>
          <th>金额</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of basicTable.data">
          <td>{{data.type | billingType}}</td>
          <td>{{data.editTime || data.createTime }}</td>
          <td style="color:rgba(29,117,224,1)"> 
            <span nz-tooltip nzTitle="点击复制订单号">
             <a  (click)="copy(data.varId)"> {{data.varId | slice : 0:4}} **** {{data.varId | slice :-4}} </a>
            </span>
          </td>
          <td>{{data.title}}</td>
          <td>{{data.user_id}}</td>
          <td>{{data.amount}}</td>
          <td>{{data.status | billingStatus}}</td>
          <td>
            <a (click)="show(data.type, data.varId)">详情 </a>
            <ng-container *ngIf="data.type === 'WITHDRAWAL_CASH' && data.status === 'PENDING' || data.type === 'WITHDRAWAL' && data.status === 'PENDING'">
              <nz-divider nzType="vertical"></nz-divider>
              <a nz-popconfirm nzTitle="确定取消?" (nzOnConfirm)="cancel(data.varId)">取消</a>
            </ng-container>
          </td>
        </tr>
      </tbody>
    </nz-table>

  </div>
  <div class="billing-list-pagination">
    <nz-pagination [nzPageIndex]="pageNo" [nzTotal]="pages*10" [nzPageSize]="10"
      (nzPageIndexChange)="pageIndexChange($event)" nzHideOnSinglePage="true"></nz-pagination>
  </div>
</div>